<!doctype html>
<html>
  <head>
    <title>Home · Solid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/favicon.ico?"
    />
    <link rel="stylesheet" href="/assets/css/main.css" />
  </head>

  <body>
    <header>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img
          src="/assets/img/solid-emblem.svg"
          alt="[Solid logo]"
        />
      </a>
      <a class="is-hidden-mobile navbar-item navbar-brand-name is-uppercase is-size-4" href="/">
        Solid
      </a>
    </div>
  
    <div class="navbar-menu">
      <div class="navbar-end">
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/use-solid"
          >Use Solid</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/for-developers"
          >For Developers</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/for-enterprises"
          >For Enterprises</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/faqs"
          >FAQ</a>
        
      </div>
    </div>
  </nav>
</header>

    <div id="draft-warning"></div>
<script>
  if (document.location.hostname === 'localhost' || document.location.hostname === 'solid.github.io') {
    const draftWarningElement = document.getElementById('draft-warning')
    draftWarningElement.innerHTML = `
      <div class="message is-danger is-large" role="alert">
        <div class="message-body">
          You are currently viewing a draft version of the Solid website. If you are looking for reliable information, visit the live site at <a href="https://solidproject.org/" title="The official Solid website">SolidProject.org</a>.
        </div>
      </div>
    `;
  }
</script>

    

    <main>
      <section id="home-hero" class="hero is-dark is-large">
  <div class="hero-body">
    <div class="container">
      <h1 class="title has-text-centered is-size-3 is-size-2-tablet is-size-1-desktop">
        Switch between storage and apps
        <br />
        while taking the data along 
      </h1>
    </div>
  </div>
</section>

<div id="landing-content">
  <section id="why-carousel" class="section">

  <div class="container">
    

    <div class="columns is-desktop">
      <div class="column">
        <div class="card">
  <div class="card-body has-text-centered section">
    <figure class="image is-64x64">
      <img src="/assets/img/fontawesome-free-5.11.2-web/svgs/solid/dolly.svg" alt="[]" />
    </figure>
    <p class="title is-size-4 is-uppercase">
      <strong>Move freely between services</strong>
    </p>
    <hr />
    <p class="content is-size-5">
      Switch to the best tools and take your data with you.
    </p>
  </div>
</div>
      </div>
      <div class="column">
        <div class="card">
  <div class="card-body has-text-centered section">
    <figure class="image is-64x64">
      <img src="/assets/img/fontawesome-free-5.11.2-web/svgs/solid/recycle.svg" alt="[]" />
    </figure>
    <p class="title is-size-4 is-uppercase">
      <strong>Reuse data across apps</strong>
    </p>
    <hr />
    <p class="content is-size-5">
      Stop re-entering the same data again and again by recycling data from app to app.
    </p>
  </div>
</div>
      </div>
      <div class="column">
        <div class="card">
  <div class="card-body has-text-centered section">
    <figure class="image is-64x64">
      <img src="/assets/img/fontawesome-free-5.11.2-web/svgs/solid/users.svg" alt="[]" />
    </figure>
    <p class="title is-size-4 is-uppercase">
      <strong>Connect with anyone</strong>
    </p>
    <hr />
    <p class="content is-size-5">
      Connect to your friends no matter what app they are using.
    </p>
  </div>
</div>
      </div>
      <div class="column">
        <div class="card">
  <div class="card-body has-text-centered section">
    <figure class="image is-64x64">
      <img src="/assets/img/fontawesome-free-5.11.2-web/svgs/solid/crosshairs.svg" alt="[]" />
    </figure>
    <p class="title is-size-4 is-uppercase">
      <strong>Select what you share precisely</strong>
    </p>
    <hr />
    <p class="content is-size-5">
      Give access to the bare minimum of data needed for the service to work.
    </p>
  </div>
</div>
      </div>
    </div>
  </div>
</section>


  <section id="choose-your-own-adventure" class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title has-text-centered is-size-3 is-size-2-tablet is-size-2-desktop">
        Find out why you'll love Solid
      </h1>
      <div class="section field is-grouped">
        <div class="control">
          <a href="/for-developers" class="button is-large is-primary is-rounded is-uppercase">As a developer</a>
        </div>
        <div class="control">
          <a href="/for-enterprises" class="button is-large is-primary is-rounded is-uppercase">As an enterprise</a>
        </div>
      </div>
    </div>
  </div>
</section>


  <div id="tour">
    <section class="section">
      <div class="container">
        <div class="columns">
          <div class="column is-hidden-touch is-offset-1 is-4">
            <figure class="image">
              <img src="/assets/img/like-peas-in-a-pod.svg" alt="[]" />
            </figure>
          </div>
          <div class="column is-offset-1 is-5">
            <h2 class="title">Like peas in a Pod</h2>
            <p class="content is-large">
              Your <a href="/faqs#pod" title="Frequently Asked Questions - what is a Pod?">Pod</a> is where you store your data. Pods and apps are separate but compatible so you are free to change apps while keeping your data. For example, if you want to switch messaging app you can take your contacts and chat history along easily, as long as both apps support Solid.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="container">
        <div class="columns">
          <div class="column is-offset-1 is-5">
            <h2 class="title">The last login you'll ever need</h2>
            <p class="content is-large">
              Your <a href="/faqs#webid" title="Frequently Asked Questions - what is a WebID?">WebID</a> changes the power dynamic. You call the shots: instead of creating an account for each app, have each app find your account. On top of that, your WebID makes it possible for people to connect to you, no matter what Solid apps they are using.
            </p>
          </div>
          <div class="column is-hidden-touch is-offset-1 is-4">
            <figure class="image">
              <img src="/assets/img/single-sign-on.svg" alt="[]" />
            </figure>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="container">
        <div class="columns">
          <div class="column is-hidden-touch is-offset-1 is-4">
            <figure class="image is-square">
              <img src="/assets/img/solid-is-a-standard.svg" alt="[]" />
            </figure>
          </div>
          <div class="column is-offset-1 is-5">
            <h2 class="title">
              Open specifications built on open standards
            </h2>
            <p class="content is-large">
              Websites, you can browse them on any device
              and with a browser you choose.
              Solid gives you that same choice, but for <em>data</em>:
              you can pick the apps you trust
              to handle your personal data.
              To realize such unprecedented interoperability,
              Solid uses the same recipe as the Web:
              following <a href="https://solid.github.io/specification/">open standards and specifications</a>.
              Anyone is welcome to <a href="/standardisation">join the standardisation process</a>.
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>

  <div class="columns">
    <div class="column is-half-desktop is-offset-one-quarter-desktop">
      <div id="newsletter" class="section">
  <form action="https://tinyletter.com/ThisWeekInSolid" class="card" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/ThisWeekInSolid', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
    <div class="card-body section">
      <h2 class="title">
        
          <a href="/this-week-in-solid" title="View past editions of This Week in Solid">
            This Week in Solid
          </a>
        
      </h2>
      <p class="content">
        <label for="tlemail">
          Leave your email address to get a bite-sized overview of everything Solid, delivered straight to your inbox once a week.
        </label>
      </p>
      <div class="field">
        <div class="control">
          <input class="input is-large" type="email" name="email" placeholder="yourmail@example.com" id="tlemail" />
        </div>
      </div>
      <input type="hidden" value="1" name="embed" />
      <div class="field">
        <div class="control">
          <input type="submit" class="button is-large" value="Subscribe" />
        </div>
      </div>
    </div>
  </form>
</div>
    </div>
  </div>

</div>

    </main>
    <footer id="footer" class="footer">
  <div class="container">
    <div class="columns">
      
        <div class="column">
          <ul>
            <li>
              
                <a class="title is-size-5" href="/">Home</a>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/use-solid">Use Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/implement">Implement Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/team">Team</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/faqs">FAQs</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <span class="title is-size-5">What's New</span>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/this-week-in-solid">This week in Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/press">Press</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/events">Solid events</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <a class="title is-size-5" href="/for-developers">For Developers</a>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/for-developers/apps">Writing apps</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/for-developers/pod-server">Running a Pod server</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/funding">Funding</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="https://forum.solidproject.org">Forum</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <span class="title is-size-5">More</span>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/standardisation">Standardisation</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/license">License</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/logo-usage-guidelines">Logo usage guidelines</a>
                
              </li>
            
          </ul>
        </div>
      
    </div>
  </div>

  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img
          src="/assets/img/solid-emblem.svg"
          alt="[Solid logo]"
        />
      </a>
      <a class="navbar-item" href="mailto:info@solidproject.org">
        info@solidproject.org
      </a>
      <a class="navbar-item" href="https://github.com/solid/" title="Solid on GitHub">
        <span class="image is-24x24">
          <img
            src="/assets/img/fontawesome-free-5.11.2-web/svgs/brands/github.svg"
            alt="GitHub"
            class="brand-icon"
          />
        </span>
      </a>
      <a class="navbar-item" href="https://twitter.com/project_solid" title="Solid on Twitter">
        <span class="image is-24x24">
          <img
            src="/assets/img/fontawesome-free-5.11.2-web/svgs/brands/twitter.svg"
            alt="Twitter"
            class="brand-icon"
          />
        </span>
      </a>
    </div>
  </nav>
</footer>

  </body>


</html>
